<template>
  <div class="nav">
    <div class="navbtn" :class="{active:$store.state.design.whatTool===1}" style="background-position-y: -408px;" @click="choiseTool(1)" />
    <div class="navbtn" :class="{active:$store.state.design.whatTool===2}" style="background-position-y: -270px;" @click="choiseTool(2)" />
    <div class="navbtn" :class="{active:$store.state.design.whatTool===5}" style="background-position-y: -508px;" @click="choiseTool(5)" />
    <div class="navbtn" :class="{active:$store.state.design.whatTool===3}" style="background-position-y: -135px;" @click="choiseTool(3)" />
    <div v-show="$store.state.design.categoriesTabShow" class="navbtn" :class="{active:$store.state.whatTool===4}" style="background-position-y: -5px;" @click="choiseTool(4)" />
  </div>
</template>
<script>
export default {
  components: {},
  created() {},
  mounted() {},
  methods: {
    choiseTool(msg) {
      this.$store.commit('design/setWhatTool', msg);
      if (!this.$store.state.design.svgBoxShow) { this.$store.commit('design/setSvgBoxShow', true); }
    }
  }
};
</script>
<style>
.nav {
  position: absolute;
  left: -60px;
  top: 0;
  height: 100%;
  width: 60px;
  background-color: #4b4b4b;
}
.navbtn {
  height: 105px;
  cursor: pointer;
  background-image: url("/static/image/sprite2.png");
  background-position-x: -62px;
}
.navbtn:hover {
  background-color: #333;
}
.navbtn.active {
  background-color: #fff;
  background-position-x: 0;
}
</style>

// WEBPACK FOOTER //
// src/components/nav-box.vue
